<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="lib/swiper/swiper.css">
    <link rel="stylesheet" href="less/index.css">
    <script>
         document.querySelector('html').style.fontSize=(window.screen.width/20)+'px';
           window.onresize=function () {
               document.querySelector('html').style.fontSize=(window.screen.width/20)+'px';
           }
    </script>
</head>
<body>
<audio src="music/hlw.mp3" class="audioMusic">
    您的浏览器不支持 audio 标签。
</audio>
<input type="button" class="mymusic">
    <div class="loading" >
        <div class="pepole"></div>
        <div class="heng">
            <div class="progress"></div>
        </div>
        <div class="jia"></div>
        <div class="waimai"></div>
        <div class="text">@&nbsp;2020 baidu waimai Produced</div>
    </div>
    <div class="welcome">
<!--        一只送外卖的熊-->
        <div class="info">
            <div class="hello"></div>
        </div>
        <!--        云背景-->
        <div class="clouds"></div>

<!--        草坪1-->
        <div class="grass"></div>
<!--        草坪2-->
        <div class="trees"></div>
<!--        草坪3-->
        <div class="grass2"></div>
        <!--        熊盒-->
        <div class="rider-box">
            <div class="rider"></div>
            <div class="jet"></div>
        </div>
<!--        开始按钮-->
        <div class="start">
            <div class="bear-aft"></div>
<!--            旋转红-->
            <div class="circle2"></div>
        </div>
        <div class="text">长按启动，观外卖之路</div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
                <div class="info">
                    <h2>生活中,</h2>
                    <p>经常有这种时候...</p>
                    <span></span>
                </div>
<!--                第一页的第一页-->
                <div class="page1_1">
<!--第一页的第一个背景-->
                    <div class="page1_1_bgc"></div>
                    <!--                    办公桌-->
                    <div class="front1"></div>
                    <!--                文本框-->
                    <div class="tex">
                        <!--                    工作根本停不下来-->
                        <div class="work"></div>
                    </div>
                </div>
<!--              第一页的第二页-->
                <div class="page1_2" >
                    <div class="page1_1_bgc"></div>
                    <div class="front1"></div>
                    <!--                文本框-->
                    <div class="tex">
                        <!--                   躺着根本起不来-->
                        <div class="work"></div>
                    </div>
                </div>
<!--                第一页的第三页-->
                <div class="page1_3">
                    <div class="person">
                        <div class="word1"></div>
                        <div class="word2"></div>
                        <div class="word3"></div>
                        <div class="word4"></div>
                    </div>
                    <!--                文本框-->
                    <div class="tex">
                        <!--                  挤的动不了-->
                        <div class="work"></div>
                    </div>

                </div>
                <!--                小星球-->
                <div class="sphere"></div>
<!--                小熊-->
                <div class="bear1"></div>

            </div>
            <div class="swiper-slide page2">
                <div class="info">
                    <h2>这个时候</h2>
                    <p>如果有一份美味外卖... </p>
                    <p>正好出现...</p>
                    <span></span>
                </div>
                <!--                小星球-->
                <div class="sphere"></div>
                <div class="bg">
                    <div class="bear2">
                        <div class="left"></div>
                        <div class="right"></div>
                        <div class="tu_left"></div>
                        <div class="tu_right"></div>
                    </div>
                    <div class="bg4"></div>
                    <div class="table"></div>
                    <div class="foods"></div>
                </div>
            </div>
<!--            第三页-->
            <div class="swiper-slide page3">
                <div class="info">
                    <h2>这个时候</h2>
                    <p>如果有一份美味的西兰花... </p>
                    <p>炒蛋就能够驱散热意</p>
                    <span></span>
                </div>
                <!--                小星球-->
                <div class="bg">
                    <div class="page3_bg"></div>
<!--                    无破裂的无证无照盒子-->
                    <div class="bear2">
                        <div class="di1"></div>
                        <div class="di2"></div>
                        <div class="di3"></div>
                    </div>
<!--                    破裂的无证无照盒子-->
                    <div class="di1-box">
                        <div class="di1-box-1"></div>
                        <div class="di1-box-2"></div>
                        <div class="di1-box-3"></div>
                    </div>
<!--                    熊-->
                    <div class="bear3"></div>
<!--                    熊盒-->
                    <div class="bear-box">
                        <div class="bear-box-1"></div>
                        <div class="bear-box-2"></div>
                        <div class="bear-box-3"></div>
                    </div>
                </div>
                <div class="sphere"></div>
            </div>
<!--            第四页-->
            <div class="swiper-slide page4">
                <div class="info">
                    <h2>百度外卖</h2>
                    <p>只做有品质的外卖...</p>
                    <p>操作快捷</p>
                    <span></span>
                </div>
                <div class="page3_bg"></div>
                <div class="sphere"></div>
                <div class="bear4"></div>
                <div class="card1"></div>
                <div class="card2"></div>
                <div class="card3"></div>
            </div>
<!--            第五页-->
            <div class="swiper-slide page5">
                <div class="info">
                    <h2>无论前方</h2>
                    <p>狂风，大雨，还是飘雪...</p>
                    <p>始终坚持在路上...</p>
                    <span></span>
                </div>
<!--                背景-->
                <div class="page3_bg"></div>
<!--                下面的星球-->
                <div class="sphere"></div>
<!--骑手盒-->
                <div class="qi">
                    <!--                骑手-->
                    <div class="bear4"> </div>
                    <!--                    轮子下面的雾气-->
                    <div class="shadow"></div>
                </div>
<!--                云朵-->
                <div class="weather">
                    <!--                雪花-->
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                </div>
            </div>
<!--            第六页-->
            <div class="swiper-slide page6">
                <div class="info">
                    <h2>丰富礼品</h2>
                    <p>让你边吃边省钱...</p>
                    <span></span>
                </div>
                <!--                背景-->
                <div class="page3_bg"></div>
                <!--                下面的星球-->
                <div class="sphere"></div>
                    <!--               小熊-->
                <div class="bear4">
<!--                        所有的食物和盒子-->
                    <div class="foods-box">
                        <div><div class="gift1"></div></div>
                        <div><div class="gift2"></div></div>
                        <div><div class="gift3"></div></div>
                        <div><div class="gift4"></div></div>
                        <div><div class="gift5"></div></div>
                        <div><div class="gift6"></div></div>
                        <div><div class="gift7"></div></div>
                        <div><div class="gift8"></div></div>
                        <div><div class="gift9"></div></div>
                        <div><div class="gift10"></div></div>
                        <div><div class="gift11"></div></div>
                        <div><div class="gift12"></div></div>
                    </div>
                </div>
            </div>
<!--            第七页-->
            <div class="swiper-slide page7">
                <div class="info">
                    <h2>所有的努力</h2>
                    <p>都是为了让你吃到美食...</p>
                    <p>风雨无阻...</p>
                    <span></span>
                </div>
                <!--                背景-->

                    <div class="street">
                        <!--                    灯光-->
                        <div class="light">   </div>
                    </div>


                <!--                下面的星球-->
                <div class="sphere"></div>
                    <!--                熊-->
                <div class="bear4"> </div>
<!--                鸽子-->
                <div class="moto"></div>
<!--                分享朋友圈-->
                <div class="share"></div>
<!--                外卖-->
                <div class="text">waimai.baidu.com</div>
            </div>
        </div>
    </div>

<script src="lib/swiper/swiper.js"></script>
<script src="lib/zepto/zepto.js"></script>
<script src="lib/zepto/event.js"></script>
<script src="lib/zepto/fx.js"></script>
<script src="lib/zepto/touch.js"></script>
<script src="lib/zepto/fx_methods.js"></script>
<script>
var mySwiper =new Swiper('.swiper-container',{
    direction: 'vertical',
    on: {
        slideChangeTransitionEnd: function(){
            // alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
            $(".swiper-slide").eq(this.activeIndex).addClass("animation")
                .siblings().removeClass("animation");
            if (this.activeIndex==2){
                $(".swiper-slide").eq(2).addClass("swiper-no-swiping");
            }
            if(this.previousIndex==2) {
                $(".page3 .bear2 div").attr("style","");
                $(".page3 .di1-box div").attr("style","");
                $(".page3 .bear-box div").attr("style","");
                $(".page3 .bear3").attr("style","");
            }
        },
    }
})
    $(function () {
        // 第一页js
       setInterval(function () {
           $(".loading").addClass('animation').on("animationend",function () {
               $(this).fadeOut(1000,function () {
                   $(".welcome").addClass("animation");
               })
           })
       },1000);
       // 第二页js绑定
        $(".start").longTap(function () {
            $(".rider-box").css("animation","riderBoxDownup .5s linear forwards");
             setInterval(function () {
                 $(".welcome").fadeOut(1000,function () {
                $(".page1").addClass("animation");
                 })
             },1000)
        })
        //第三页js绑定
        $(".page3").on("click",function () {
            // $(".swiper-slide").eq(this.activeIndex).
            console.log("ok");


            $(this).children(".bg").children(".bear3").css("animation","none");
               // .css("opacity","0");
            console.log("点击了之后")
            var index=0;
           const clear=setInterval(function () {
               $(".bear-box div").css("opacity","0");
               console.log(index)
               $(".bear-box div").eq(index).css("opacity","1");
               $(".page3 .bear2 div").eq(index).css("animation","none");
               $('.di1-box div').eq(index).css("opacity","1");
               index++;
               if(index>=3){
                   clearInterval(clear);
                   $(".di1-box div").css("animation","riderBoxDownup .5s linear forwards");
                   $(".page3").removeClass("swiper-no-swiping");
               }
           },500)
        })
 })
$(".mymusic").on('click',function () {
    if($(".audioMusic")[0].paused){
        $(".audioMusic")[0].play();
        $(this).css("background","url('./images/play.png')  no-repeat center / 100% 100%")
    }else {
        $(".audioMusic")[0].pause();
        $(this).css("background","url('./images/pause.png')  no-repeat center / 100% 100%")
    }
})
</script>
</body>
</html>